<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <!--          删除-->
            <a-modal
                :visible="state.deleteVisible"
                title="删除"
                @ok="confirmDelete"
                @cancel="state.deleteVisible = false"
                centered
                width="520px"
            >
                是否删除该区域？
                <p>
                    如该区域下的工厂已填报周报、总结等数据，删除后请联系对应工厂填报人员修改关联区域，避免看板数据遗漏。
                </p>
            </a-modal>
            <!--          删除-->
            <!--          新建区域-->
            <a-modal
                centered
                :visible="state.addRegionVisible"
                title="新建区域"
                width="400px"
                @ok="confirmRegion"
                @cancel="cancalRegion"
                :body-style="{ padding: '16px' }"
                :ok-button-props="{ loading: state.regionLoading }"
                destroy-on-close
            >
                <div class="region-title"
                    ><ExclamationCircleFilled style="color: #f7b500; margin-right: 8px" />
                    同区域的工厂分tab展示请创建新的区域</div
                >
                <a-form :model="state.regionForm" ref="regionRef">
                    <a-form-item
                        label="区域名称"
                        :rules="[{ required: true, message: '请输入区域名称' }]"
                        name="regionName"
                    >
                        <a-input
                            v-model:value="state.regionForm.regionName"
                            placeholder="请输入区域名称"
                            maxlength="7"
                            show-count
                        />
                    </a-form-item>
                    <a-form-item
                        label="模板名称"
                        :rules="[{ required: true, message: '请选择模板名称' }]"
                        name="templateId"
                    >
                        <a-select
                            allow-clear
                            show-search
                            placeholder="请选择"
                            v-model:value="state.regionForm.templateId"
                            :options="state.templateList"
                            style="width: 100%"
                            :field-names="{ label: 'templateName', value: 'templateId' }"
                            :filterOption="
                                (input, option) => {
                                    return option.templateName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            "
                        />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!--          新建区域-->
            <!--          配置区域-->
            <a-modal
                centered
                :visible="state.configurationVisible"
                title="配置"
                width="500px"
                @ok="confirmConfiguration"
                @cancel="cancalConfiguration"
                :body-style="{ padding: '16px', height: '600px', overflowY: 'auto' }"
                :ok-button-props="{ loading: state.pzLoading }"
                destroy-on-close
                :maskClosable="false"
            >
                <div class="region-title"
                    ><ExclamationCircleFilled style="color: #f7b500; margin-right: 8px" />
                    新建/删除项目阶段后请及时在项目整体进度甘特图中编辑项目进度</div
                >
                <a-form :model="state.configurationForm" ref="configurationRef">
                    <div class="my-page">
                        <div class="form-top">
                            <a-form-item
                                label="是否展示"
                                :rules="[{ required: true, message: '请选择是否展示' }]"
                                name="display"
                            >
                                <a-radio-group v-model:value="state.configurationForm.display">
                                    <a-radio value="是">是</a-radio>
                                    <a-radio value="否">否</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item
                                label="区域名称"
                                :rules="[{ required: true, message: '请输入区域名称' }]"
                                name="regionName"
                            >
                                <a-input
                                    v-model:value="state.configurationForm.regionName"
                                    placeholder="请输入区域名称"
                                    maxlength="7"
                                />
                            </a-form-item>
                            <a-form-item
                                label="工厂名称"
                                :rules="[{ required: true, message: '请选择工厂名称' }]"
                                name="factoryIdList"
                            >
                                <a-tree-select
                                    v-model:value="state.configurationForm.factoryIdList"
                                    show-search
                                    style="width: 100%"
                                    placeholder="请选择"
                                    tree-checkable
                                    allow-clear
                                    :tree-data="state.treeData"
                                    :fieldNames="{
                                        children: 'children',
                                        label: 'projectName',
                                        value: 'projectId'
                                    }"
                                    :max-tag-count="1"
                                />
                            </a-form-item>
                        </div>
                        <div
                            class="module-item"
                            v-for="(item, index) in state.configurationForm.milepostNameList"
                            :key="index"
                        >
                            <div class="form-content">
                                <a-form-item
                                    label="项目阶段"
                                    :rules="[{ required: true, message: '请输入项目阶段名称！', trigger: 'blur' }]"
                                    :name="['milepostNameList', index, 'milepostName']"
                                >
                                    <a-col :span="24">
                                        <a-input
                                            v-model:value="state.configurationForm.milepostNameList[index].milepostName"
                                            placeholder="请输入项目阶段名称"
                                        />
                                    </a-col>
                                </a-form-item>
                            </div>

                            <a class="add-btn" @click="handlerAddFormItem(index)">添加</a>
                            <a class="del" @click="handlerDeleteFormItem(index)">删除</a>
                        </div>
                    </div>
                </a-form>
            </a-modal>
            <!--          配置区域-->
            <div class="body">
                <div class="no-data-img" v-if="state.dataSource.length == 0">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="265px"
                        height="192px"
                        viewBox="0 0 265 192"
                        version="1.1"
                    >
                        <title>暂无待办事项</title>
                        <defs>
                            <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-1">
                                <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-2">
                                <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="50%" y1="85.1278551%" x2="50%" y2="-24.3022005%" id="linearGradient-3">
                                <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                <stop stop-color="#3875FF" stop-opacity="0.2" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="50%" y1="50%" x2="50%" y2="-4.79965365%" id="linearGradient-4">
                                <stop stop-color="#3875FF" stop-opacity="0" offset="0%" />
                                <stop stop-color="#3875FF" stop-opacity="0.1" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-5">
                                <stop stop-color="#9CBEF7" offset="0%" />
                                <stop stop-color="#96D1F7" offset="100%" />
                            </linearGradient>
                            <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-6">
                                <stop stop-color="#9CBEF7" offset="0%" />
                                <stop stop-color="#96D1F7" offset="100%" />
                            </linearGradient>
                        </defs>
                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="审批管理-暂无待办事项" transform="translate(-927, -470)">
                                <g id="暂无待办事项" transform="translate(927, 470)">
                                    <g id="编组-69备份-3备份-3" fill-rule="nonzero">
                                        <path
                                            d="M30.4,70.4 C38.3897145,70.4 44.9396432,76.4022329 45.5530639,84.0283112 C45.8323774,84.0092712 46.1150286,84 46.4,84 C53.027417,84 58.4,89.0144112 58.4,95.2 C58.4,101.385589 53.027417,106.4 46.4,106.4 C46.1313282,106.4 45.8647188,106.391759 45.6004459,106.375534 L45.6,107.2 L8.8,107.2 L8.80006856,105.99739 C3.72613437,104.690379 0,100.351322 0,95.2 C0,89.0144112 5.372583,84 12,84 C13.1159648,84 14.1963502,84.1421776 15.2214963,84.4081848 C15.6437054,76.6027782 22.2779069,70.4 30.4,70.4 Z"
                                            id="形状结合备份"
                                            fill="url(#linearGradient-1)"
                                        />
                                        <path
                                            d="M174.4,35.2 L174.400166,35.1009906 C168.085987,34.3137074 163.2,28.9274454 163.2,22.4 C163.2,15.3307552 168.930755,9.6 176,9.6 C177.223344,9.6 178.406604,9.77161808 179.527019,10.0920919 C181.87653,4.17968127 187.650157,0 194.4,0 C202.141022,0 208.598072,5.49733733 210.080147,12.8010091 C216.449395,12.8415186 221.6,17.8400063 221.6,24 C221.6,30.0561716 216.621551,34.98966 210.40049,35.1934501 L210.4,35.2 L174.4,35.2 Z"
                                            id="形状结合"
                                            fill="url(#linearGradient-2)"
                                            transform="translate(192.4, 17.6) scale(-1, 1) translate(-192.4, -17.6)"
                                        />
                                        <path
                                            d="M242.8,47.2 C247.491543,47.2 251.362882,50.7117164 251.928816,55.249951 C252.214523,55.2167339 252.505192,55.2 252.8,55.2 C256.77645,55.2 260,58.2444637 260,62 C260,65.7555363 256.77645,68.8 252.8,68.8 C252.529676,68.8 252.262831,68.7859302 252.000242,68.7585236 L252,69.6 L229.6,69.6 L229.600068,68.6315132 C226.393652,67.9443906 224,65.2361993 224,62 C224,58.2444637 227.22355,55.2 231.2,55.2 C232.054514,55.2 232.874259,55.3405911 233.634718,55.5986176 C234.040539,50.892793 237.989021,47.2 242.8,47.2 Z"
                                            id="形状结合备份-2"
                                            fill="url(#linearGradient-3)"
                                        />
                                        <g id="编组-50" transform="translate(1.6, 76.8)">
                                            <ellipse
                                                id="椭圆形"
                                                fill="url(#linearGradient-4)"
                                                cx="131.6"
                                                cy="57.6"
                                                rx="131.6"
                                                ry="57.6"
                                            />
                                            <g id="编组-46" transform="translate(30.4, 4.8)">
                                                <rect id="矩形" fill="#D7E3FF" x="6.4" y="20" width="2.4" height="12" />
                                                <path
                                                    d="M8.4,21.5460356 C25.469423,21.5460356 11.8000002,-1.42108547e-14 8.4,-1.42108547e-14 C4.99999998,-1.42108547e-14 -8.66942296,21.5460356 8.4,21.5460356 Z"
                                                    id="椭圆形"
                                                    fill="#EAF0FF"
                                                />
                                            </g>
                                            <g id="编组-46备份-2" transform="translate(218.4, 4.8)">
                                                <rect
                                                    id="矩形"
                                                    fill="#D7E3FF"
                                                    x="4.97664"
                                                    y="13.824"
                                                    width="1.65888"
                                                    height="8.2944"
                                                />
                                                <path
                                                    d="M5.80608,14.8926198 C17.6044651,14.8926198 8.15616008,-9.8225428e-15 5.80608,-9.8225428e-15 C3.45599989,-9.8225428e-15 -5.99230512,14.8926198 5.80608,14.8926198 Z"
                                                    id="椭圆形"
                                                    fill="#EAF0FF"
                                                />
                                            </g>
                                            <g id="编组-46备份" transform="translate(245.6, 21.6)">
                                                <rect id="矩形" fill="#D7E3FF" x="3.6" y="10" width="1.2" height="6" />
                                                <path
                                                    d="M4.2,10.7730178 C12.7347114,10.7730178 5.90000008,-7.10542736e-15 4.2,-7.10542736e-15 C2.5,-7.10542736e-15 -4.33471146,10.7730178 4.2,10.7730178 Z"
                                                    id="椭圆形"
                                                    fill="#EAF0FF"
                                                />
                                            </g>
                                        </g>
                                    </g>
                                    <g id="编组-61" transform="translate(89.6, 21.6)">
                                        <ellipse
                                            id="椭圆形"
                                            fill="#E2EBFF"
                                            fill-rule="nonzero"
                                            cx="42.8"
                                            cy="80"
                                            rx="42.8"
                                            ry="4.8"
                                        />
                                        <rect
                                            id="矩形备份-91"
                                            fill="url(#linearGradient-5)"
                                            x="5.6"
                                            y="0"
                                            width="70.4"
                                            height="80.8"
                                            rx="3.2"
                                        />
                                        <g
                                            id="编组-60"
                                            transform="translate(20.8, 28)"
                                            fill="#FFFFFF"
                                            fill-rule="nonzero"
                                        >
                                            <rect id="矩形" x="0" y="0" width="40" height="3.2" rx="1.6" />
                                            <rect id="矩形备份-92" x="0" y="15.2" width="40" height="3.2" rx="1.6" />
                                            <rect id="矩形备份-93" x="0" y="30.4" width="40" height="3.2" rx="1.6" />
                                        </g>
                                        <path
                                            d="M21.6,0 L60.7346814,0 L55.7992343,8.40508424 C55.6555754,8.64973584 55.393086,8.8 55.1093744,8.8 L27.225307,8.8 C26.9415954,8.8 26.6791059,8.64973584 26.535447,8.40508424 L21.6,0 L21.6,0 Z"
                                            id="矩形"
                                            fill="#FFFFFF"
                                            fill-rule="nonzero"
                                        />
                                        <rect
                                            id="矩形备份-94"
                                            fill="url(#linearGradient-6)"
                                            x="29.6"
                                            y="0"
                                            width="23.2"
                                            height="3.2"
                                            rx="1.6"
                                        />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <div class="no-data-msg">暂无区域列表</div>
                </div>
                <div class="top">
                    <div class="title"> 区域列表 </div>
                    <div><a-button type="primary" @click="handleAddRegion">新建区域</a-button></div>
                </div>
                <div class="content">
                    <div class="region-item" v-for="(item, index) in state.dataSource" :key="index">
                        <div class="item-title">
                            <div class="title-left">
                                <div class="title-icon">
                                    <svg
                                        style="margin-top: 20px"
                                        xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                        width="16px"
                                        height="16px"
                                        viewBox="0 0 16 16"
                                        version="1.1"
                                    >
                                        <title>区域名称</title>
                                        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g id="客户协作端2-区域列表" transform="translate(-264, -164)">
                                                <g id="区域名称" transform="translate(264, 164)">
                                                    <rect id="矩形" x="0" y="0" width="16" height="16" />
                                                    <g
                                                        id="编组"
                                                        transform="translate(1, 2)"
                                                        stroke="#3875FF"
                                                        stroke-linecap="round"
                                                        stroke-linejoin="round"
                                                    >
                                                        <polygon
                                                            id="路径"
                                                            fill="#3875FF"
                                                            fill-rule="nonzero"
                                                            points="4.9 6.3 2.8 9.45 0 7.875 0 12.6 14 12.6 14 3.15 11.55 5.95 9.45 4.2 7 7"
                                                        />
                                                        <polyline
                                                            id="路径"
                                                            points="0 7.875 0 3.85 2.45 5.95 4.375 3.15 6.475 4.2 9.45 1.05 11.375 2.625 14 0 14 3.325"
                                                        />
                                                    </g>
                                                </g>
                                            </g>
                                        </g></svg
                                    ><span class="title-name-title">区域名称：</span
                                    ><span class="title-name">{{ item.regionName }}</span></div
                                >
                            </div>
                            <div class="title-right">
                                <a-space>
                                    <a-button type="primary" size="small" ghost @click="handlerDelete(item)"
                                        >删除</a-button
                                    >
                                    <a-button type="primary" size="small" ghost @click="handleConfiguration(item)"
                                        >配置</a-button
                                    >
                                </a-space>
                            </div>
                        </div>
                        <div class="table-title"> 区域下工厂名称 </div>
                        <div class="factory-body" v-if="item.factoryNameList && item.factoryNameList.length > 0">
                            <div
                                class="div-column"
                                v-for="(factory, index) in item.factoryNameList"
                                :key="index"
                                :style="getStyle(index, item.factoryNameList.length, 4)"
                            >
                                <a-tooltip>
                                    <template #title>{{ factory }}</template>
                                    {{ factory }}
                                </a-tooltip></div
                            >
                        </div>
                    </div>
                </div>
            </div>
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(() => {
        getData()
        getTemplate()
        getFactoryList()
    })
    const state = reactive({
        dataSource: [],
        addRegionVisible: false,
        configurationVisible: false,
        treeData: [],
        configurationForm: {
            id: undefined,
            display: '是',
            regionName: '',
            factoryIdList: [],
            milepostNameList: []
        },
        templateList: [],
        regionForm: {
            regionName: '',
            templateId: ''
        },
        pzLoading: false,
        regionLoading: false,
        deleteVisible: false
    })
    const currentItem = ref({})
    const milepostItem = {
        milepostId: null,
        milepostName: ''
    }
    // 获取列表
    function getData() {
        post('/solution-ppm/api/v2/built-in-system-ppm/cooperation/config_region/search ').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.dataSource = data.data
        })
    }
    // 获取模板
    function getTemplate() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/template/list', { templateName: '' }).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.templateList = data.data
        })
    }
    // 获取工厂
    function getFactoryList() {
        get('/solution-ppm/api/v2/built-in-system-ppm/cooperation/config_region/project_tree').then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.treeData = data.data
        })
    }
    // 新建区域
    function handleAddRegion() {
        state.addRegionVisible = true
    }
    //     保存区域
    const regionRef = ref(null)
    function confirmRegion() {
        regionRef.value
            .validate()
            .then(() => {
                state.regionLoading = true
                post('/solution-ppm/api/v2/built-in-system-ppm/cooperation/config_region', state.regionForm).then(
                    data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success('新建成功')
                        state.addRegionVisible = false
                        regionRef.value.resetFields()
                        getData()
                    }
                )
            })
            .finally(() => {
                state.regionLoading = false
            })
    }
    // 取消区域
    function cancalRegion() {
        state.addRegionVisible = false
    }
    //     配置
    function handleConfiguration(item) {
        console.log(item)
        state.configurationForm.milepostNameList = item.milepostNameList
        state.configurationForm.factoryIdList = state.configurationForm.factoryIdList = (item.factoryIdList || []).map(
            id => Number(id)
        )
        state.configurationForm.id = item.id
        state.configurationForm.regionName = item.regionName
        state.configurationForm.display = item.display
        state.configurationVisible = true
    }
    // 删除
    function handlerDelete(item) {
        currentItem.value = item
        state.deleteVisible = true
    }
    // 确定删除
    function confirmDelete() {
        del(`/solution-ppm/api/v2/built-in-system-ppm/cooperation/config_region/${currentItem.value.id}  `).then(
            data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success('删除成功')
                state.deleteVisible = false
                getData()
            }
        )
    }

    //删除一个模块
    function handlerDeleteFormItem(index) {
        state.configurationForm.milepostNameList.splice(index, 1)
    }
    // 新插一条模块
    function handlerAddFormItem(index) {
        if (index >= state.configurationForm.milepostNameList.length - 1) {
            state.configurationForm.milepostNameList.push({ ...milepostItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.configurationForm.milepostNameList.splice(index + 1, 0, { ...milepostItem })
        }
    }

    // 保存并提交
    const configurationRef = ref(null)
    function confirmConfiguration() {
        configurationRef.value
            .validate()
            .then(() => {
                state.pzLoading = true
                put('/solution-ppm/api/v2/built-in-system-ppm/cooperation/config_region', state.configurationForm).then(
                    data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success('配置成功')
                        state.configurationVisible = false
                        configurationRef.value.resetFields()
                        getData()
                    }
                )
            })
            .finally(() => {
                state.pzLoading = false
            })
    }
    //     关闭配置
    function cancalConfiguration() {
        state.configurationVisible = false
    }
    function getStyle(index, length, columnsPerRow) {
        // 计算当前元素所在的行数
        const rowIndex = Math.floor(index / columnsPerRow)
        // 计算总的行数
        const totalRows = Math.ceil(length / columnsPerRow)

        // 如果是最后一行的最后一个元素，返回隐藏底边框的样式
        if (rowIndex === totalRows - 1) {
            return {
                borderBottom: 'none'
            }
        }

        // 否则，返回默认的边框样式
        return {}
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .title {
        background-color: #fff;
        height: 16px;
        line-height: 16px;
        color: #262626;
        font-size: 16px;
        letter-spacing: 0;
        font-weight: 600;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
    }
    .region-item {
        background-color: #fff;
        box-shadow: 0 0 12px 0 rgba(229, 229, 229, 0.8);
        border-radius: 2px;
        margin-bottom: 16px;
        padding: 0 16px;
        padding-bottom: 16px;
    }
    .item-title {
        display: flex;
        justify-content: space-between;
        height: 55px;
    }
    .title-left {
        display: flex;
        width: 100%;
        justify-content: space-between;
        line-height: 55px;
    }
    .title-icon {
        display: flex;
        font-size: 16px;
        color: #262626;
        font-weight: 600;
    }
    .title-name-title {
        margin-left: 8px;
    }
    .title-name {
        font-size: 16px;
        color: #262626;
        font-weight: 600;
    }
    .title-right {
        display: flex;
        align-items: center;
        padding-right: 16px;
    }
    .top {
        width: 100%;
        height: 72px;
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
    }
    .content {
        background-color: #fff;
        padding: 0 24px;
        padding-bottom: 8px;
    }
    .table-title {
        font-size: 16px;
        color: #3875ff;
        line-height: 22px;
        font-weight: 600;
    }

    .div-column {
        flex: 1 1 25%; /* 每个 .div-column 占 25% 的宽度（4等分） */
        max-width: 25%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-right: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        padding: 9px 12px;
        cursor: default;
        font-size: 14px;
        color: #262626;
        line-height: 22px;
        font-weight: 600;
    }
    .factory-body {
        width: 100%;
        border: 1px solid #d9d9d9;
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
    }
    .region-title {
        height: 26px;
        background: #fef0cc;
        border-radius: 2px;
        padding-left: 16px;
        font-size: 12px;
        color: #595959;
        line-height: 26px;
        font-weight: 400;
        margin-bottom: 16px;
    }
    .form-top {
        border-bottom: 1px solid #3875ff;
        margin-bottom: 20px;
    }

    .form-content {
        display: inline-block;
        width: calc(100% - 80px);
    }
    .del {
        width: 28px;
        color: #3875ff;
        position: absolute;
        right: 0;
        top: 5px;
    }
    .module-item {
        position: relative;
    }
    .add-btn {
        position: absolute;
        right: 40px;
        color: #3875ff;
        top: 5px;
    }
    .content {
        height: calc(100vh - 220px);
        overflow: auto;
    }
    .no-data-img {
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .no-data-msg {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #595959;
    }
</style>
